<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>music-list</title>
	<meta name="referrer" content="no-referrer">
	<link rel="shortcut icon" href="http://s1.music.126.net/music.ico?v1">
	<meta charset="utf-8" name="viewport" content="initial-scale=1,width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<style type="text/css">
		*{margin: 0;
		padding: 0;}
		.header{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			height: 60px;
			background: #ccc;
			line-height: 25px;
			font-size: 20px;
			text-align: center;
		}
		.m-name{
			margin-bottom: 5px;
			color: lightseagreen;
		}
		.author-name{
			font-size: 16px;
			color: limegreen;
		}
		.record{
			display: none;
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			height: 80px;
			background: #ccc;
			justify-content: space-between;
			align-items: center;
		}
		.footer span{
			font-size: 20px;
		}
		#play{
			padding-top: 5px;
		}
		.play{
			padding: 2px 0 0 2px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			text-align: center;
			line-height: 50px;
			opacity: 0.7;
		}
		.play-active{
			padding: 2px 0 0 2px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			text-align: center;
			line-height: 50px;
			opacity: 0.7;
			animation-name: rotate;
			animation-duration:3s;
			animation-timing-function:linear;
			animation-iteration-count:infinite;
		}

		button{
			width: 50px;
			height: 30px;
			font-size: 24px;
		}
		.glyphicon-step-backward,.glyphicon-step-forward{
			font-size: 24px;
			text-align: center;
			border: none;
			border-radius: 10px;
			outline: none;
		}
		.content{
			width: 100%;
			height: 420px;
			background-size: contain;
			position: fixed;
			top: 60px;
		}
		.content img{
			width: 100%;
			height: 420px;
		}

		#range{
			position: fixed;
			bottom: 90px;
			left: 0;
			width: 100%;
			height: 6px;
			background: #121a2a;		
		}
		.progress2{
			width: 100%;
			height: 7px;
			/*border-radius: 50%;*/
			position: absolute;
			/*top: -5px;*/
			background: #ccc;
		}
		.time{
			width: 100%;
			position: fixed;
			bottom: 100px;
			display: flex;
			justify-content: space-between;
		}
		@keyframes rotate{
			0%{
			
			}
			
			100%{
				transform:rotate(360deg);
			}
		}
	</style>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</head>
<body>
	<div class="header">
		<p class="m-name">歌曲名</p>
		<p class="author-name">歌手名</p>
		<audio src=""></audio>
		<p class="record"></p>
	</div>
	
	<!--content-->
	<div class="content">
		<img src=""/>
	</div>
	
	<!--time-->
	<div class="time">
		<span class="start">0:0</span>
		<span class="final">0:0</span>
	</div>
	
	<!--进度条-->
		<div id="range">
			<div class="progress2"></div>
		</div>

	
	<!--尾部-->
	<div class="footer">
		<div id="">
			<button class="glyphicon glyphicon-step-backward"></button>
			<!-- <span id="">
				上一首
			</span> -->
		</div>
		<div id="play">
			<div class="play">
				<span class="glyphicon glyphicon-play"></span>
			</div>
			<!-- <span id="">
				播放/暂停
			</span> -->
		</div>
		<div id="">
			<button class="glyphicon glyphicon-step-forward"></button>	
			<!-- <span id="">
				下一首
			</span> -->
		</div>
	</div>
</body>
<script type="text/javascript">
// var t = 196;
// console.log( Math.floor(t/60)+":"+(t%60/100).toFixed(2).slice(-2) );
	$(function(){
		var newData=[];
		var cnt=0;
		// $(document).ready(getChannel());
		getChannel();
		var audio=document.querySelector('audio');
		//下一首
		$('button').eq(1).click(function(){
			getChannel();
//			getmusic();
			cnt=0;
		});
		//上一首
		$('button').eq(0).click(function(){
			prev();
		})
		//播放键
		$('#play').click(function(){
			if (audio.paused) {
				play();
			} else{
				pause();
			}
		})

			
		//播放
		function play(){
			audio.play();
			$('#play span').removeClass('glyphicon glyphicon-play').addClass('glyphicon glyphicon-pause');
			$('#play div').removeClass('play').addClass('play-active');
		}
		//暂停
		function pause(){
			audio.pause();
			$('#play span').removeClass('glyphicon glyphicon-pause').addClass('glyphicon glyphicon-play');
			$('#play div').removeClass('play-active').addClass('play');

		}
		//获取频道
		 function getChannel(){
			$.ajax({
				type:"get",
				url:"http://api.jirengu.com/fm/getChannels.php",
				async:true,
				dataType:'json',
				success:function(data){
					var channels = data.channels;
	              	var num = Math.floor(Math.random()*channels.length);
	             	var channelname = channels[num].name;//获取随机频道的名称
	              	var channelId = channels[num].channel_id;//获取随机频道ID
	              	$('.record').text(channelname);
	              	$('.record').attr('title',channelname);
	              	$('.record').attr('data-id',channelId);//将频道ID计入data-id中
	              	getmusic();
				}
			});
		 }
		// 通过ajax获取歌曲
		function getmusic(){
		    $.ajax({
		        url: 'http://api.jirengu.com/fm/getSong.php',
		        dataType: 'json',
		        Method: 'get',
		        data:{
		            'channel': $('.record').attr('data-id')
		        },
		        success:function(data){
		        	newData.unshift(data);
		        	var dataArr=data.song[0];
		        	$('audio').attr('src',dataArr.url);
		        	$('.m-name').text("歌曲名："+dataArr.title);
		        	$('.author-name').text("歌手名："+dataArr.artist);
		        	$('.content img').attr('src',dataArr.picture);
		        	$('#play div').css('background',"url("+dataArr.picture+")");
		        	$('#play div').css('background-size','contain');
		        	play();
				}
			})
		};
		//上一首
		function prev(){
			++cnt;
			if(cnt<newData.length){//定义一个计数器跟数组的长度进行比较，在数组之内，可以运行下面代码
				var music=newData[cnt].song[0];
				$('audio').attr('src',music.url);
		        $('.m-name').text("歌曲名："+music.title);
		        $('.author-name').text("歌手名："+music.artist);
		        $('.content img').attr('src',music.picture);
		        $('#play div').css('background',"url("+music.picture+")");
		        $('#play div').css('background-size','contain');
		       	play();
			} else {
				alert('到头了！！');
				return;
//				cnt=0;
			}
		}
		
		//进度条拖拽
		var timer=setInterval(change,500)
		var progress=document.getElementsByClassName('progress2')[0];
		var range=document.querySelector('#range');
		var startX,disX;
		var posObj;
		var minuteS,secondS;//总的时间
		var minute,second;//变化的时间
		range.addEventListener('touchstart',function(e){
			var target=e.targetTouches[0];
			startX=target.clientX;//鼠标点下的初始位置
			// posObj=parseInt(range.style.left)|0;
		});
		range.addEventListener('touchmove',function(e){
		
		});
		range.addEventListener('touchend',function(e){
			posObj = startX;
			audio.currentTime=posObj/innerWidth*audio.duration;

		})
		
		//行走的进度条
		function change(){
		// console.log(audio.buffered);
			if (audio.currentTime==audio.duration) {
				getmusic();
				$('.progress2').css('left',0);
				$('#play div').removeClass('play-active').addClass('play');
			}
			if (audio.duration>0) {
				minuteS = parseFloat(parseFloat(audio.duration)/60);
				secondS = parseInt(parseFloat(audio.duration)%60);
				minute = parseFloat(parseFloat(audio.currentTime)/60);
				second = parseInt(parseFloat(audio.currentTime)%60);
				// 中间暂停旋转的图片
				if (audio.paused) {
					$('#play div').removeClass('play-active').addClass('play');
				} else {
					$('#play div').removeClass('play').addClass('play-active');
				}
				//判断时间个位数
				if (secondS<10) {
					$('.final').text("0"+parseInt(minuteS)+":"+"0"+secondS);//变换的时间	
				} else {
					$('.final').text("0"+parseInt(minuteS)+":"+secondS);//变换的时间
				}
				var jindu = audio.currentTime/audio.duration;
				$('.progress2').css('left',jindu*innerWidth);//变化的进度条
			}
			
		}

		//时间
		var time2=setInterval(function(){
			if (audio.duration>0) {
				$('#play').animate({'transition':'transform','transform':'rotate(360deg)'});
				if (second<10) {
					$('.start').text("0"+parseInt(minute)+":"+"0"+second);//变换的时间	
				} else {
					$('.start').text("0"+parseInt(minute)+":"+second);//变换的时间
				}
			}
			
		},1000);


	})
</script>
</html>